<template>
    <div>{{detail.id}}</div>
    <LeftRightSwitch ref="leftRightSwitchRef" :list="list" v-model:apiConfig="apiConfig" @switch="onSwitchDetail"></LeftRightSwitch>
</template>
<script lang="ts" setup>
import LeftRightSwitch from '@/components/LeftRightSwitch/index.vue'

import { getTableList } from '@/mock/local';
import { onMounted, ref } from 'vue'
const list = ref([{ id: 1, name: '1' },{  id: 16, name: '2' }])
const detail  = ref({})
const leftRightSwitchRef = ref()
const apiConfig = ref({
    page:2,
    apiFun:()=>{
        return new Promise((resolve) => {
            let page = apiConfig.value.page
            
            setTimeout(() => {
                let data = getTableList({page_num:apiConfig.value.page})
                console.log('data',page, data)
                resolve(getTableList({page_num:apiConfig.value.page}))
            }, 1000)
        })
    }
})
onMounted(()=>{
    detail.value = list.value[1]
    leftRightSwitchRef.value.initData( detail.value.id)
    
})
const onSwitchDetail =  (item) => { 
    detail.value = item
}
</script>